import React from 'react'
import { add, asyncAddAction, sub }  from '../app/slices/countSlice';
import { add as zadd} from '../app/slices/zanSlice';
import { useDispatch, useSelector } from 'react-redux';

export default function ReduxCom() {
  //状态的获取      {count: 100, zan: {value: 0}}
  let count = useSelector(state => state.count);
  let zan = useSelector(state => state.zan.value);
  //获取更新状态的函数
  let dispatch = useDispatch();
  return (
    <div>
      <h2>计数器: {count}</h2>
      <button onClick={() => {
        dispatch(add(10));
      }}>新增</button>
      <button onClick={() => {
        dispatch(sub(10));
      }}>减少</button>
      <button onClick={() => {
        dispatch(asyncAddAction(6))
      }}>1秒后增加 100</button>
      <hr />

      <h2>点赞数: {zan}</h2>
      <button onClick={() => {
        dispatch(zadd());
      }}>点赞</button>
    </div>
  )
}
